<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>fzk的博客</title>
    <!--百度统计-->
    <script src="/blog/js/statistics.js"></script>
    <!--layUI的css-->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!--animate 的css-->
    <link rel="stylesheet" type="text/css" href="/lib/animate/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="/lib/animate/css/animate.css"/>
    <!--layUI的js-->
    <script src="/layui/layui.js"></script>
    <script>
        layui.layer.load(1, {shade: [0.8, '#cccccc'], time: 5 * 1000});
    </script>
</head>
<body>
<div class="layui-layout layui-layout-admin showInTop a-time1 a-delay1 ">
    <!--导航栏-->
    <div class="layui-header layui-bg-green">
        <div class="layui-logo  layui-bg-green"><a href="/blog/blog_timeline.html"><h2 class="layui-font-cyan">Blog</h2>
        </a></div>
        <ul class="layui-nav layui-layout-left layui-bg-green">
            <li class="layui-nav-item layui-this">
                <a href="index.html">
                    <button id="index_btn" hidden></button>
                    <i class="layui-icon layui-icon-home"></i>首页<span
                        class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="/blog/blog_type.html"><i class="layui-icon layui-icon-diamond"></i>分类<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="/blog/blog_tag.html"><i class="layui-icon layui-icon-note"></i>标签<span
                        class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="/blog/blog_timeline.html"><i class="layui-icon layui-icon-date"></i>时间线<span
                        class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="/blog/tucao.html" target="_blank"><i class="layui-icon layui-icon-date"></i>吐槽<span
                        class="layui-badge">9</span></a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right layui-bg-green">
            <li class="layui-nav-item" name="user_li">
                <a href="#"><img src="https://picsum.photos/500" class="layui-nav-img" alt=""><span>游客</span></a>
                <dl class="layui-nav-child">
                    <dd name="not_login_to_hidden" hidden><a href="/blog/personal.html">个人中心</a></dd>
                    <dd name="not_login_to_hidden" hidden><a href="/settings/menu.html">博客管理</a></dd>
                    <dd><a href="/login.html">登录</a></dd>
                    <dd name="not_login_to_hidden" hidden><a href="#" onclick="logout()">退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <!--主体内容-->
    <div id="main_content" class="my_opacity" style="padding: 6em 5% 10em 5%;width: 90%;">
        <div class="layui-row layui-col-space15">
            <!--中间内容-->
            <div class="layui-col-md9 layui-col-xs9">
                <!--header-->
                <div class="layui-panel layui-bg-cyan" style="margin-bottom: 1em;border-radius: 1em;border:0;">
                    <div class="layui-row">
                        <div class="layui-col-md2 layui-col-sm3">
                            <h3 style="padding: 1em;"><span class="layui-font-20">博客</span></h3>
                        </div>
                        <div class="layui-col-md3 layui-col-md-offset1 layui-col-sm3">
                            <h3 style="padding: 1em">共<span class="layui-badge" name="blog_number">9</span>篇</h3>
                        </div>
                        <!--搜索框-->
                        <div class="layui-col-md2 layui-col-md-offset3 layui-col-sm4 ">
                            <input class="layui-input" style="margin-top:0.5em;" name="search_blog_title"
                                   placeholder="%blog-title%">
                        </div>
                        <div class="layui-col-md1 layui-col-sm2">
                            <button id="search_btn" class="layui-btn" style="margin-top: 0.5em;">
                                <i class="layui-icon layui-icon-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <!--content：博客列表-->
                <div id="blog_list">
                    <div class="layui-card layui-bg-gray">
                        <div class="layui-card-header"><h3>这是一个标题</h3></div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md3"><a href="/blog/blog_detail.html">
                                    <img src="https://picsum.photos/id/140/600/400" alt="图片"
                                         style="height: auto;width: 100%"></a>
                                </div>
                                <div class="layui-col-md8 layui-col-md-offset1">
                                    <div class="layui-row">
                                        卡片式面板面板通常用于非白色背景色的主体内<br/>
                                        从而映衬出边框投影......
                                    </div>
                                    <!--博客的标签列表-->
                                    <div class="layui-row">
                                        <div class="layui-col-md2 layui-col-sm3 layui-col-xs6"
                                             style="padding: 0.5em 0.5em">
                                            <button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs"
                                                    onclick="" name="tag_id" value="1">
                                                我草123
                                            </button>
                                        </div>
                                    </div>
                                    <!--博客信息-->
                                    <div class="layui-row layui-col-space4">
                                        <div class="layui-col-md1 layui-col-sm1"><img class="layui-nav-img"
                                                                                      src="https://picsum.photos/100/100?image=140"
                                                                                      alt=""></div>
                                        <div class="layui-col-md3 layui-col-sm3"><a href="#"><span
                                                class="layui-font-blue">一场游戏啦啦啦</span></a>
                                        </div>
                                        <div class="layui-col-md3 layui-col-sm3"><i
                                                class="layui-icon layui-icon-date"></i>2021-08-03
                                        </div>
                                        <div class="layui-col-md2 layui-col-sm2"><i
                                                class="layui-icon layui-icon-senior"></i>12345
                                        </div>
                                        <div class="layui-col-md3 layui-col-sm3">
                                            <button class="layui-btn layui-btn-xs layui-btn-radius">分类</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--页按钮-->
                <div id="blog_page_btn" class="layui-row" style="text-align: center"></div>

            </div>

            <!--边栏-->
            <div class="layui-col-md3 layui-col-xs3">

                <!--分类面板-->
                <div class="layui-card" style="margin-top:4em;border-radius: 1em">
                    <!--标题-->
                    <div class="layui-card-header layui-bg-cyan">
                        <div class="layui-row">
                            <div class="layui-col-md4 layui-col-sm6">
                                <i class="layui-icon layui-icon-diamond"></i>&nbsp;分类
                            </div>
                            <div class="layui-col-md4 layui-col-md-offset4 layui-col-sm6 layui-hide-xs">
                                <a href="#" onclick="$('#type_list').children().prop('hidden',false)"><span
                                        class="layui-font-blue">more</span></a>
                            </div>
                        </div>
                    </div>
                    <!--分类内容-->
                    <div class="layui-card-body">
                        <div id="type_list" style="width: 95%;text-align: center">
                            <div class="layui-row" style="padding: 0.5em">
                                <div class="layui-col-xs8">
                                    <a href="#" onclick="$('#hidden_type_flag').val(true);$('#hidden_type_id').val(1);">Spring框架原理</a>
                                </div>
                                <div class="layui-col-xs-2 layui-col-xs-offset2">
                                    <span class="layui-badge">6</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <!--标签面板-->
                <div class="layui-card" style="margin-top:4em;border-radius: 1em">
                    <!--标题-->
                    <div class="layui-card-header layui-bg-cyan">
                        <div class="layui-row">
                            <div class="layui-col-md4 layui-col-sm6">
                                <i class="layui-icon layui-icon-note"></i>&nbsp;标签
                            </div>
                            <div class="layui-col-md4 layui-col-md-offset4 layui-col-sm6 layui-hide-xs">
                                <a href="#" onclick="
                                $('#tag_list_computer').children().prop('hidden',false);
                                  $('#tag_list_phone').children().prop('hidden',false); "><span
                                        class="layui-font-blue">more</span></a>
                            </div>
                        </div>
                    </div>

                    <!--标签内容：1.电脑版本的-->
                    <div id="tag_list_computer" class="layui-card-body layui-hide  layui-show-md-block">
                        <div class="layui-row" style="padding: 0.5em">
                            <div class="layui-col-xs4 layui-col-xs-offset1">
                                <a href="#"
                                   class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs layui-font-orange">
                                    我草123<span class="layui-badge">10</span>
                                </a>
                            </div>
                            <div class="layui-col-xs4 layui-col-xs-offset2">
                                <a href="#"
                                   class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs layui-font-orange">
                                    我草123<span class="layui-badge">10</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!--标签内容：2.手机版本的-->
                    <div id="tag_list_phone" class="layui-card-body  layui-hide-md layui-hide-lg">
                        <div class="layui-row">
                            <div class="layui-col-xs12">
                                <a href="#"
                                   class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs layui-font-orange">
                                    我草123<span class="layui-badge">10</span>
                                </a>
                            </div>
                        </div>
                    </div>


                </div>

                <!--最新博客面板-->
                <div class="layui-card" style="margin-top:4em;border-radius: 1em">
                    <!--标题-->
                    <div class="layui-card-header layui-bg-cyan">
                        <div class="layui-row">
                            <div class="layui-col-md4 layui-col-sm6">
                                <i class="layui-icon layui-icon-diamond"></i>&nbsp;最新博客
                            </div>
                            <div class="layui-col-md4 layui-col-md-offset4 layui-col-sm6 layui-hide-xs">
                                <a href="#" onclick="$('#blog_new_list').children().prop('hidden',false)"><span
                                        class="layui-font-blue">more</span></a>
                            </div>
                        </div>
                    </div>
                    <!--最新博客列表内容-->
                    <div class="layui-card-body">
                        <div id="blog_new_list" style="width: 95%;text-align: center">
                            <div class="layui-row" style="padding: 0.5em">
                                <div class="layui-col-xs8">
                                    <a href="#" class="layui-font-green">Spring框架原理</a>
                                </div>
                                <div class="layui-col-xs-2 layui-col-xs-offset2">
                                    <!--浏览次数-->
                                    <span class="layui-icon layui-icon-senior layui-font-red">10</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>

    <!--底部footer-->
    <footer class="my_layui-footer">
        <div class="layui-container">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md3 layui-col-sm3">
                    <img src="/blog/img/二维码.png" alt="图片"
                         style="width: 100px; height: 100px; margin-right: 10px; border-radius: 10%;">
                </div>
                <div class="layui-col-md3 layui-col-sm3">
                    <h4>最新博客</h4>
                    <ul class="layui-nav layui-nav-tree layui-bg-gray">
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-email"></i>博客1</li>
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-email"></i>博客2</li>
                    </ul>
                </div>
                <div class="layui-col-md3 layui-col-sm3">
                    <h4>联系我</h4>
                    <ul class="layui-nav layui-nav-tree layui-bg-gray">
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-email"></i>767719297@qq.com</li>
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-cellphone"></i>15082687458</li>
                    </ul>
                </div>
                <div class="layui-col-md3 layui-col-sm3">
                    <h4>先留着</h4>
                    <ul class="layui-nav layui-nav-tree layui-bg-gray">
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-email"></i>767719297@qq.com</li>
                        <li class="layui-nav-item"><i class="layui-icon layui-icon-cellphone"></i>15082687458</li>
                    </ul>
                </div>
            </div>
            <hr class="layui-border-cyan">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-sm4 layui-col-sm-offset4">
                    <img src="/blog/img/beian.png" alt="">
                    <a style="color:#000000" href="http://beian.miit.gov.cn/" target="_blank">蜀ICP备2024111956号</a>&nbsp;&nbsp;&nbsp;
                </div>
            </div>
        </div>
    </footer>
</div>


<!--隐藏域：保存一些重要信息-->
<!--保存search_blog_title-->
<input type="hidden" name="hidden_blog_title" value="">
</body>
</html>

<style>
    body {
        background-image: url("https://z3.ax1x.com/2021/08/28/hly7I1.jpg");
        background-size: 100% auto;
        background-repeat: repeat;
    }

    .my_layui-footer {
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 990;
        height: auto;
        line-height: 44px;
        padding: 0 15px;
        /*box-shadow: -1px 0 4px rgb(0 0 0 12%);*/
        background-color: #FAFAFA
    }

</style>

<!--jQuery-->
<script src="/jquery-3.6.0.min.js"></script>
<!--自己的js-->
<script src="/blog/js/index.js"></script>
<script src="/blog/js/common.js"></script>
<script src="/blog/js/background.js"></script>
<!--引入看板娘-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="/lib/live2d/autoload.js"></script>
<!--<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>-->